<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FallGame</title>

    <style>
        

        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: blueviolet;
        }

        h1 {
            text-align: center;
            margin-top: 15px;
            font-size: 50px;
        }

        hr {
            text-align: center;
            margin: 50px;
        }

        #game {
            width: 400px;
            height: 500px;
            border: 5px solid red;
            border-radius: 15px;
            margin: 100px 0 0 550px;
            overflow: hidden;
        }

        #character {
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
            position: relative;
            top: 400px;
            left: 190px;
            z-index: 1000000;
        }

        .block {
            width: 400px;
            height: 20px;
            background-color: black;
            position: relative;
            top: 100px;
            margin-top: -20px;
        }

        .hole {
            width: 40px;
            height: 20px;
            background-color: blueviolet;
            position: relative;
            top: 100px;
            margin-top: -20px;
        }
    </style>
</head>

<body>
    <h1>Fall Game</h1>
    <hr>
    <div id="game">
        <div id="character">

        </div>
    </div>
</body>


<script>
    var character = document.getElementById('character');
    var game = document.getElementById('game');
    var interval;
    var both = 0;
    var counter = 0;
    var currentBlocks = [];

    function moveLeft() {
        var left = parseInt(window.getComputedStyle(character).getPropertyValue("left"));
        if (left > 0) {

            character.style.left = left - 2 + "px";
        }
    }
    function moveRight() {
        var left = parseInt(window.getComputedStyle(character).getPropertyValue("left"));
        if (left < 380) {

            character.style.left = left + 2 + "px";
        }
    }

    document.addEventListener("keydown", event => {
        if (both == 0) {
            both++;
            if (event.key === "ArrowLeft") {
                interval = setInterval(moveLeft, 1);
            }
            if (event.key === "ArrowRight") {
                interval = setInterval(moveRight, 1);
            }
        }
    });

    document.addEventListener("keyup", event => {
        clearInterval(interval);
        both = 0;
    });

    var blocks = setInterval(function () {
        var blockLast = document.getElementById("block" + (counter - 1));
        var holeLast = document.getElementById("hole" + (counter - 1));

        if (counter > 0) {

            var blockLastTop = parseInt(window.getComputedStyle(blockLast).getPropertyValue("top"));
            var holeLastTop = parseInt(window.getComputedStyle(holeLast).getPropertyValue("top"));
        }

        if (blockLastTop < 400 || counter == 0) {

            var block = document.createElement("div");
            var hole = document.createElement("div");
            block.setAttribute("class", "block");
            hole.setAttribute("class", "hole");
            block.setAttribute("id", "block" + counter);
            hole.setAttribute("id", "hole" + counter);

            block.style.top = blockLastTop + 100 + "px";
            hole.style.top = holeLastTop + 100 + "px";

            var random = Math.floor(Math.random() * 360);
            hole.style.left = random + "px";

            game.appendChild(block);
            game.appendChild(hole);
            currentBlocks.push(counter);
            counter++;
        }

        var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
        var characterLeft = parseInt(window.getComputedStyle(character).getPropertyValue("left"));
        var drop = 0;

        if (characterTop <= 0) {
            alert('Game Over. Score: ' + (counter - 9));
            clearInterval(blocks);
            location.reload();
        }

        for (var i = 0; i < currentBlocks.length; i++) {
            let current = currentBlocks[i];
            let iBlock = document.getElementById("block" + current);
            let iHole = document.getElementById("hole" + current);

            let iblockTop = parseFloat(window.getComputedStyle(iBlock).getPropertyValue("top"));
            let iholeLeft = parseFloat(window.getComputedStyle(iHole).getPropertyValue("left"));

            iBlock.style.top = iblockTop - 0.5 + "px";
            iHole.style.top = iblockTop - 0.5 + "px";

            if (iblockTop < -20) {
                currentBlocks.shift();
                iBlock.remove();
                iHole.remove();
            }
            if (iblockTop - 20 < characterTop && iblockTop > characterTop) {
                drop++;
                if (iholeLeft <= characterLeft && iholeLeft + 20 >= characterLeft) {
                    drop = 0;
                }
            }
        }
        if (drop == 0) {
            if (characterTop < 480) {

                character.style.top = characterTop + 2 + "px";
            }
        }
        else {
            character.style.top = characterTop - 0.5 + "px";
        }
    }, 1);

</script>

</html>